<template>
  <div class="app-container">
    <div class="section">
      <div class="card">
        <el-card style="height: 100%;" :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div class="user-content">
            <div class="user-title">
              <div class="welcom">欢迎回来,</div>
              <el-tooltip class="item" effect="light" :content="user.nickName?user.nickName:user.username" placement="top-start">
                <span class="username">{{ user.nickName?user.nickName:user.username }}</span>
              </el-tooltip>
            </div>
            <div class="user-time">
              {{ currentDate }}
            </div>
          </div>
        </el-card>
      </div>
      <div class="card">
        <el-card style="height: 100%;" :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header" style="text-align: center;">
            <span>订单</span>
          </div>
          <el-descriptions direction="vertical" :column="5" border
                           :label-style="{textAlign: 'center',fontWeight: 'bold'}" :contentStyle="{textAlign: 'center'}"
          >
            <el-descriptions-item label="退订处理">
              <div class="content" :class="{active: auth.hasPermi('enterprise:unsubscribe:list')}"
                   @click.stop="handleGoToUrl({name: 'Unsubscribe',path: '/daily-rent/list',permission: 'enterprise:unsubscribe:list'})"
              >
                <div class="num">{{ order.unsubscribe }}</div>
                <!--跳转页面-->
                <div class="text">待审核
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="退租审核">
              <div class="content" :class="{active: auth.hasPermi('enterprise:checkOutAudit:list')}"
                   @click.stop="handleGoToUrl({name: 'Surrender',path: '/long-short-rent/check/surrender',permission: 'enterprise:checkOutAudit:list',params: {auditRecordState: '1'}})"
              >
                <div class="num">{{ order.surrender }}</div>
                <div class="text">待审核</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="换房审核">
              <div class="content" :class="{active: auth.hasPermi('enterprise:changeRoomAudit:list')}"
                   @click.stop="handleGoToUrl({name: 'Change-house-check',path: '/long-short-rent/check/change-house-check',permission: 'enterprise:changeRoomAudit:list',params: {auditRecordState: '1'}})"
              >
                <div class="num">{{ order.change }}</div>
                <div class="text">待审核</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="续租审核">
              <div class="content" :class="{active: auth.hasPermi('enterprise:continueAudit:list')}"
                   @click.stop="handleGoToUrl({name: 'Relet',path: '/long-short-rent/check/relet',permission: 'enterprise:continueAudit:list',params: {auditRecordState: '1'}})"
              >
                <div class="num">{{ order.renew }}</div>
                <div class="text">待审核</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="转租审核">
              <div class="content" :class="{active: auth.hasPermi('enterprise:subleaseAudit:list')}"
                   @click.stop="handleGoToUrl({name: 'Sublet',path: '/long-short-rent/check/sublet',permission: 'enterprise:subleaseAudit:list',params: {auditRecordState: '1'}})"
              >
                <div class="num">{{ order.transfer }}</div>
                <div class="text">待审核</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
      <div class="card">
        <el-card style="height: 100%;" :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header" style="text-align: center;">
            <span>工单</span>
          </div>
          <el-descriptions direction="vertical" :column="6" border
                           :label-style="{textAlign: 'center',fontWeight: 'bold'}" :contentStyle="{textAlign: 'center'}"
          >
            <el-descriptions-item label="验房">
              <div class="content" :class="{active: auth.hasPermi('enterprise:inspection:list')}"
                   @click.stop="handleGoToUrl({name: 'Inspection',path: '/houseCleaning/inspection',permission: 'enterprise:inspection:list'})"
              >
                <div class="num">{{ workOrder.inspection }}</div>
                <div class="text">待处理</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="打扫">
              <div class="content" :class="{active: auth.hasPermi('enterprise:sweep:list')}"
                   @click.stop="handleGoToUrl({name: 'Sweep',path: '/houseCleaning/sweep',permission: 'enterprise:sweep:list'})"
              >
                <div class="num">{{ workOrder.sweep }}</div>
                <div class="text">待处理</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="报修">
              <div class="content" :class="{active: auth.hasPermi('enterprise:workOrder:list')}"
                   @click.stop="handleGoToUrl({name: 'WorkOrder',path: '/houseManagement/workOrder',permission: 'enterprise:workOrder:list', params: {workOrderType: '1'}})"
              >
                <div class="num">{{ workOrder.repair }}</div>
                <div class="text">待处理</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="保洁">
              <div class="content" :class="{active: auth.hasPermi('enterprise:workOrder:list')}"
                   @click.stop="handleGoToUrl({name: 'WorkOrder',path: '/houseManagement/workOrder',permission: 'enterprise:workOrder:list', params: {workOrderType: '2'}})"
              >
                <div class="num">{{ workOrder.clean }}</div>
                <div class="text">待处理</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="看房">
              <div class="content" :class="{active: auth.hasPermi('enterprise:workOrder:list')}"
                   @click.stop="handleGoToUrl({name: 'WorkOrder',path: '/houseManagement/workOrder',permission: 'enterprise:workOrder:list', params: {workOrderType: '3'}})"
              >
                <div class="num">{{ workOrder.view }}</div>
                <div class="text">待处理</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="密码申请">
              <div class="content" :class="{active: auth.hasPermi('workOrder:pwdRecord:list')}"
                   @click.stop="handleGoToUrl({name: 'PwdRecord',path: '/audit/pwdRecord',permission: 'workOrder:pwdRecord:list'})"
              >
                <div class="num">{{ workOrder.pwdAuditCount }}</div>
                <div class="text">待处理</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>
    <div class="section" style="grid-template-columns: repeat(1, 1fr);">
      <div class="card">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header">
            <span>房源信息</span>
          </div>
          <div class="info" style="grid-template-columns: repeat(5, 1fr);">
            <div class="item">
              <div class="value">{{ houseMap.estate }}<span>个</span></div>
              <div class="label">小区总数量</div>
            </div>
            <div class="item">
              <div class="value">{{ houseMap.building }}<span>栋</span></div>
              <div class="label">楼房总栋数</div>
            </div>
            <div class="item">
              <div class="value">{{ houseMap.unit }}<span>个</span></div>
              <div class="label">单元总数</div>
            </div>
            <div class="item">
              <div class="value">{{ houseMap.house }}<span>间</span></div>
              <div class="label">房间数量</div>
            </div>
            <div class="item">
              <div class="value">{{ houseMap.member }}<span>人</span></div>
              <div class="label">总人口数</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="section" style="grid-template-columns: repeat(1, 1fr);">
      <div class="card">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <span>账单总览</span>
              <div class="btn-group">
                <div class="btn-item" :class="{'active': currentDateIndex === index}"
                     v-for="(item, index) in billDateList" :key="index"
                >
                  <span @click="handleDateItemChange(index,item)">{{ item.label }}</span>
                  <el-date-picker
                    v-if="index === 3"
                    v-model="billDate"
                    size="mini"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :disabled="currentDateIndex !== 3"
                    style="margin-left: 10px;"
                    @change="handleBillDateChange"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>

          </div>
          <div class="info" style="grid-template-columns: repeat(3, 1fr);">
            <div class="item">
              <div class="item-header">
                <span>收费情况</span>
              </div>
              <div class="item-body">
                <div class="item-body-item">
                  <div class="item-body-item-label">应收金额：</div>
                  <div class="item-body-item-value">￥{{ billData.totalBill.receivableAmount }}元</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">实收金额：</div>
                  <div class="item-body-item-value">￥{{ billData.totalBill.actualAmount }}元</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">待缴费：</div>
                  <div class="item-body-item-value">￥{{ billData.totalBill.debtAmount }}元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-header">
                <span>业主账单</span>
              </div>
              <div class="item-body">
                <div class="item-body-item">
                  <div class="item-body-item-label">总账单：</div>
                  <div class="item-body-item-value">￥{{ billData.proprietorBill.totalAmount }}元</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">待付款：</div>
                  <div class="item-body-item-value">￥{{ billData.proprietorBill.unpaidAmount }}元</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">待付款（逾期）：</div>
                  <div class="item-body-item-value">￥{{ billData.proprietorBill.overdueAmount }}元</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-header">
                <span>入住账单</span>
              </div>
              <div class="item-body">
                <div class="item-body-item">
                  <div class="item-body-item-label">总账单：</div>
                  <div class="item-body-item-value">￥{{ billData.houseBill.totalAmount }}元</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">待付款：</div>
                  <div class="item-body-item-value">￥{{ billData.houseBill.unpaidAmount }}元</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">待付款（逾期）：</div>
                  <div class="item-body-item-value">￥{{ billData.houseBill.overdueAmount }}元</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="section" style="grid-template-columns: repeat(1, 1fr);">
      <div class="card">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header">
            <span>在租房源总览</span>
          </div>
          <div class="info" style="grid-template-columns: repeat(3, 1fr);">
            <div class="item">
              <div class="item-header">
                <span>全部房源</span>
              </div>
              <div class="item-body">
                <div class="item-body-item">
                  <div class="item-body-item-label">空置：</div>
                  <div class="item-body-item-value">{{ houseStateMap.vacancy }}</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">预定：</div>
                  <div class="item-body-item-value">{{ houseStateMap.reserve }}</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">已租：</div>
                  <div class="item-body-item-value">{{ houseStateMap.leased }}</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-header">
                <span>长租订单</span>
              </div>
              <div class="item-body">
                <div class="item-body-item">
                  <div class="item-body-item-label">今日签约：</div>
                  <div class="item-body-item-value">{{ longOrderMap.today }}份</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">本周签约：</div>
                  <div class="item-body-item-value">{{ longOrderMap.thisWeek }}份</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">本月签约：</div>
                  <div class="item-body-item-value">{{ longOrderMap.thisMonth }}份</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-header">
                <span>短租订单</span>
              </div>
              <div class="item-body">
                <div class="item-body-item">
                  <div class="item-body-item-label">今日入住：</div>
                  <div class="item-body-item-value">{{ shortOrderMap.today }}份</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">本周入住：</div>
                  <div class="item-body-item-value">{{ shortOrderMap.thisWeek }}份</div>
                </div>
                <div class="item-body-item">
                  <div class="item-body-item-label">本月入住：</div>
                  <div class="item-body-item-value">{{ shortOrderMap.thisMonth }}份</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="section" style="grid-template-columns: repeat(2, 1fr);">
      <div class="card" @click.stop="handleGoToUrl({name: 'Lessee',path: '/long-short-rent/contract/lessee',permission: 'enterprise:lesseeContract:list'})">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header">
            <span>租客合同</span>
          </div>
          <div class="info" style="grid-template-columns: repeat(4, 1fr);">
            <div class="item">
              <div class="value">{{ lesseeContractMap.confirm }}</div>
              <div class="label">待确认</div>
            </div>
            <div class="item">
              <div class="value">{{ lesseeContractMap.signing }}</div>
              <div class="label">签署中</div>
            </div>
            <div class="item">
              <div class="value">{{ lesseeContractMap.expiringSoon }}</div>
              <div class="label">即将到期</div>
            </div>
            <div class="item">
              <div class="value">{{ lesseeContractMap.expire }}</div>
              <div class="label">已逾期</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="card" @click.stop="handleGoToUrl({name: 'Proprietor',path: '/long-short-rent/contract/proprietor',permission: 'enterprise:proprietorContract:list'})">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header">
            <span>业主合同</span>
          </div>
          <div class="info" style="grid-template-columns: repeat(4, 1fr);">
            <div class="item">
              <div class="value">{{ proprietorContractMap.signing }}</div>
              <div class="label">签署中</div>
            </div>
            <div class="item">
              <div class="value">{{ proprietorContractMap.finish }}</div>
              <div class="label">已完成</div>
            </div>
            <div class="item">
              <div class="value">{{ proprietorContractMap.terminate }}</div>
              <div class="label">已终止</div>
            </div>
            <div class="item">
              <div class="value">{{ proprietorContractMap.expire }}</div>
              <div class="label">已逾期</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="section" style="grid-template-columns: repeat(2, 1fr);">
      <div class="card">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
          <div slot="header">
            <span>租客性别</span>
          </div>
          <sexRatio :data="sexMap" />
        </el-card>
        <div class="echart-container">
          <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
            <div slot="header">
              <span>租客年龄</span>
            </div>
            <AgePieChart :data="ageMap" />
          </el-card>
          <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}">
            <div slot="header">
              <span>在租租户租金分布</span>
            </div>
            <AgePieChart :data="monthRentMap" />
          </el-card>
        </div>
      </div>
      <div class="card">
        <el-card :body-style="{'height': '100%', 'padding': '10px 20px'}" style="height: 100%;">
          <div slot="header">
            <span>地域分布</span>
          </div>
          <provincesRadio :region-list="regionList" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate, getStartAndEnd, getWeekday } from '@/utils/common/moment'
import { getHomeBillData, getHomeData } from '@/api/home'
import auth from '@/plugins/auth'
import { mapState } from 'vuex'
import AgePieChart from  "@/views/components/home/age-ratio.vue"
import sexRatio from '@/views/components/home/sex-ratio.vue'
import provincesRadio from '@/views/components/home/provinces-radio.vue'

export default {
  name: 'index',
  components: {
    AgePieChart,sexRatio,provincesRadio
  },
  data() {
    return {
      // 订单数据
      order: {
        unsubscribe: 0,//订单-退订审核,
        surrender: 0,//订单-退租审核
        change: 0,//订单-换房审核
        renew: 0,//订单-续租审核
        transfer: 0//订单-转租审核
      },
      // 工单数据
      workOrder: {
        inspection: 0,//工单-验房
        sweep: 0,//工单-打扫
        clean: 0,//工单-保洁
        repair: 0,//工单-报修
        view: 0,// 工单-看房
        pwdAuditCount: 0//工单-密码申请
      },
      // 房源信息
      houseMap: {
        'unit': 0, //房源信息-单元
        'estate': 0, //房源信息-楼盘
        'member': 0, //房源信息-总人口
        'house': 0, //房源信息-房间
        'building': 0 //房源信息-楼房
      },
      // 在租房源总览-全部房源
      houseStateMap: {
        'leased': 0, //在租房源总览-已租
        'reserve': 4, //在租房源总览-预订
        'vacancy': 0 //在租房源总览-空置
      },
      // 在租房源总览-长租订单
      longOrderMap: {
        'today': 0, //在租房源总览-长租订单-今日签约
        'thisWeek': 0, //在租房源总览-长租订单-本周签约
        'thisMonth': 0 //在租房源总览-长租订单-本月签约
      },
      // 在租房源总览-短租订单
      shortOrderMap: {
        'today': 0, //在租房源总览-短租订单-今日入住
        'thisWeek': 0, //在租房源总览-短租订单-本周入住
        'thisMonth': 0 //在租房源总览-短租订单-本月入住
      },
      // 租客合同
      lesseeContractMap: {
        'confirm': 0, //租客合同-待确认
        'signing': 0, //租客合同-签署中
        'expire': 0, //租客合同-已逾期
        'expiringSoon': 0 //租客合同-租客合同-即将到期
      },
      // 业主合同
      proprietorContractMap: {
        'signing': 0, //业主合同-签署中
        'finish': 0, //业主合同-已完成
        'terminate': 0, //业主合同-已终止
        'expire': 0 //业主合同-已逾期
      },
      // 当前所选日期项Index
      currentDateIndex: 0,
      //
      billDateList: [
        {
          label: '今日',
          value: 'today'
        },
        {
          label: '本周',
          value: 'week'
        },
        {
          label: '本月',
          value: 'month'
        },
        {
          label: '自定义'
        }
      ],
      // 账单日期
      billDate: [],
      // 账单数据
      billData: {
        //入住账单
        houseBill: {
          'totalAmount': 0, //入住账单-总账单
          'overdueAmount': 0, //入住账单-逾期
          'unpaidAmount': 0 //入住账单-待付款
        },
        //收费情况
        totalBill: {
          'actualAmount': 0, //收费情况-实收金额
          'receivableAmount': 0, //收费情况-应收金额
          'debtAmount': 0 //收费情况-代缴费
        },
        //业主账单
        proprietorBill: {
          'totalAmount': 0, //业主账单-总账单
          'overdueAmount': 0, //业主账单-逾期
          'unpaidAmount': 0 //业主账单-待付款
        }
      },
      // 租客性别
      sexMap:[
        {
          name: '男性',
          key: 'male',
          value: 0
        },
        {
          name: '女性',
          key: 'female',
          value: 0
        }
      ],
      // 租客年龄
      ageMap: [
        {
          name: '19岁及以下',
          key: 'a',
          value: 0
        },
        {
          name: '20-29岁',
          key: 'b',
          value: 0
        },
        {
          name: '30-39岁',
          key: 'c',
          value: 0
        },
        {
          name: '40-49岁',
          key: 'd',
          value: 0
        },
        {
          name: '50岁以上',
          key: 'e',
          value: 0
        }
      ],
      // 租金分布
      monthRentMap: [
        {
          name: '0≤租金3000元',
          key: 'a',
          value: 0
        },
        {
          name: '3000元≤租金6000元',
          key: 'b',
          value: 0
        },
        {
          name: '6000元≤租金10000元',
          key: 'c',
          value: 0
        },
        {
          name: '10000元≤租金15000元',
          key: 'd',
          value: 0
        },
        {
          name: '15000元≤租金',
          key: 'e',
          value: 0
        }
      ],
      // 地域分布
      regionList: []
    }
  },
  computed: {
    auth() {
      return auth
    },
    currentDate() {
      return `今天是${formatDate(new Date(), 'YYYY年MM月DD日')}，${getWeekday()}`
    },
    ...mapState({
      user: state => state.user
    })
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getHomeData()
      this.getHomeBillData()
    },
    // 获取首页数据
    getHomeData() {
      getHomeData().then(res => {
        // 订单数据
        this.order = {
          unsubscribe: res.data.orderMap['104'], //订单-退租审核,
          surrender: res.data.orderMap['8'], //订单-退租审核
          change: res.data.orderMap['12'], //订单-换房审核
          renew: res.data.orderMap['15'], //订单-续租审核
          transfer: res.data.orderMap['13'] //订单-转租审核
        }
        // 工单数据
        this.workOrder = {
          inspection: res.data.workOrderMap['inspection'], //工单-验房
          sweep: res.data.workOrderMap['sweep'], //工单-打扫
          clean: res.data.workOrderMap['2'], //工单-保洁
          repair: res.data.workOrderMap['1'], //工单-报修
          view: res.data.workOrderMap['3'], // 工单-看房
          pwdAuditCount: res.data.workOrderMap['pwdAuditCount'] //工单-密码申请
        }
        //房源信息
        this.houseMap = res.data.houseMap
        //在租房源总览-全部房源
        this.houseStateMap = res.data.houseStateMap
        //在租房源总览-长租订单
        this.longOrderMap = {
          'today': res.data.longOrderMap['1'], //在租房源总览-长租订单-今日签约
          'thisWeek': res.data.longOrderMap['2'], //在租房源总览-长租订单-本周签约
          'thisMonth': res.data.longOrderMap['3'] //在租房源总览-长租订单-本月签约
        }
        //在租房源总览-短租订单
        this.shortOrderMap = {
          'today': res.data.shortOrderMap['1'], //在租房源总览-短租订单-今日入住
          'thisWeek': res.data.shortOrderMap['2'], //在租房源总览-短租订单-本周入住
          'thisMonth': res.data.shortOrderMap['3'] //在租房源总览-短租订单-本月入住
        }
        //租客合同
        this.lesseeContractMap = {
          'confirm': res.data.lesseeContractMap['1'], //租客合同-待确认
          'signing': res.data.lesseeContractMap['2'], //租客合同-签署中
          'expire': res.data.lesseeContractMap['5'], //租客合同-已逾期
          'expiringSoon': res.data.lesseeContractMap['expiringSoon'] //租客合同-即将到期
        }
        //业主合同
        this.proprietorContractMap = {
          'signing': res.data.proprietorContractMap['1'], //业主合同-签署中
          'finish': res.data.proprietorContractMap['2'], //业主合同-已完成
          'terminate': res.data.proprietorContractMap['3'], //业主合同-已终止
          'expire': res.data.proprietorContractMap['4'] //业主合同-已逾期
        }
        // 租客年龄
        for (let i in res.data.ageMap) {
          this.ageMap.find(item => item.key === i).value = res.data.ageMap[i]
        }
        //租金分布
        for (let i in res.data.monthRentMap) {
          this.monthRentMap.find(item => item.key === i).value = res.data.monthRentMap[i]
        }
        // 租客性别
        for (let i in res.data.sexMap) {
          this.sexMap.find(item => item.key === i).value = res.data.sexMap[i]
        }
        // 地域分布
        this.regionList = res.data.regionList
      })
    },
    // 获取首页账单数据
    getHomeBillData(params = {}) {
      console.log('params', params)
      getHomeBillData(params).then(res => {
        this.billData = res.data
      })
    },
    // 账单日期改变
    handleBillDateChange(val) {
      console.log('val', val)
      if (val.length === 2) {
        this.getHomeBillData({ startTime: val[0], endTime: val[1] })
      }
    },
    // 时间选项改变
    handleDateItemChange(index, data) {
      this.currentDateIndex = index
      if (index === 3) {
        return
      } else {
        this.billDate = []
        // 筛选数据
        if (index === 0) {
          this.getHomeBillData()
        } else if (index === 1 || index === 2) {
          let date = getStartAndEnd(data.value, 'YYYY-MM-DD')
          this.getHomeBillData({ startTime: date['start'], endTime: date['end'] })
        }
      }
    },
    // 跳转到指定页面
    handleGoToUrl(data) {
      console.log('data', data)
      if (auth.hasPermi(data.permission)) {
        // this.$router.push({
        //   path: data.path,
        //   query: data.query
        // })
        this.$router.push({
          name: data.name,
          params: data.params
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background-color: #f0f2f5;
  min-height: 90vh;
}

.section {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  //grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  .card {
    .user-content {
      height: 100%;
      width: 100%;

      .user-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        padding: 20px 0;
        display: flex;

        .welcom {
          white-space: nowrap;
        }

        .username {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .user-time {
        font-size: 14px;
        color: #909399;
      }
    }
    .info {
      display: grid;
      grid-gap: 10px;

      .item {
        text-align: center;
        border-right: 1px solid #dcdfe6;
        margin: 20px 0;

        &:last-child {
          border-right: none;
        }

        .label {
          font-size: 14px;
          color: #606266;
          padding: 10px 0;
        }

        .value {
          font-size: 18px;
          color: #303133;
          padding: 10px 0;

          span {
            font-size: 10px;
          }
        }

        .item-header {
          margin-bottom: 20px;
          font-size: 16px;
          font-weight: bold;
        }

        .item-body {
          .item-body-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px;
            margin-bottom: 20px;
            font-size: 13px;

            &:last-child {
              margin-bottom: 0;
            }

            .item-body-item-label {
              text-align: right;
            }

            .item-body-item-value {
              text-align: left;
            }
          }
        }
      }
    }

    .btn-group {
      display: flex;
      align-items: center;

      .btn-item {
        margin-right: 10px;
        padding: 5px 10px;
        color: #606266;
        cursor: pointer;
        font-size: 14px;

        &.active {
          color: #409eff;
        }
      }
    }

    .content {
      &.active {
        cursor: pointer;
      }

      .text {
        font-size: 12px;
      }
    }

    .echart-container{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
    }
  }
}

@media (max-width: 800px) {
  .section {
    grid-template-columns: 1fr;
  }
}
</style>
